<template>
	<span class="ml-a-span action-button" @click="setCondition">{{
		getSetConditionText()
	}}</span>
	<ml-dialog
		:title="title || '附加过滤条件'"
		append-to-body
		width="37%"
		v-model="dialogIsShow"
	>
		<mlSetConditions
			ref="setConditionsRefs"
			v-model="myConditionConf"
			@cancel="dialogIsShow = false"
			:entityName="myEntityName"
            @confirm="conditionConfirm"
            :enableSql="enableSql"
		/>
		<template #footer>
			<el-button 
                type="primary" 
                @click="checkConfirm"
                :size="size"
            >
                确认
            </el-button>
			<el-button 
                @click="close"
                :size="size"
            >
                取消
            </el-button>
		</template>
	</ml-dialog>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
	conditionConf: { type: Object, default: () => ({}) },
	entityName: { type: String, default: "" },
	title: { type: String, default: "" },
	beforeOpenDialog: { type: Function, default: () => () => {} },
    // 是否开启SQL
    enableSql: { type: Boolean, default: false },
    // 主题大小
    size: { type: String, default: "default" },
});
const emit = defineEmits(["confirm", "update:modelValue"]);

let dialogIsShow = ref(false);
let myConditionConf = ref({});

let myEntityName = ref("");

const defaultConditionConf = {
	equation: "OR",
	items: [],
};

// 设置条件
const setCondition = () => {
	if (!props.beforeOpenDialog()) return;
	myEntityName.value = props.entityName;
	myConditionConf.value = initFilter(
		Object.assign(
			{},
			defaultConditionConf,
			JSON.parse(JSON.stringify(props.conditionConf))
		)
	);
	dialogIsShow.value = true;
};



// 初始化条件
const initFilter = (filter) => {
	let { equation } = filter;
	if (!equation || equation === "OR") {
		filter.type = 1;
		filter.equation = "OR";
	} else if (equation === "AND") {
		filter.type = 2;
		filter.equation = "AND";
	} else {
		filter.type = 3;
	}
	return filter;
};

// 获取设置条件文案
const getSetConditionText = () => {
    const itemCount = props.conditionConf?.items?.length || 0;
    return itemCount > 0 ? `已设置条件（${itemCount}）` : "点击设置";
};

const setConditionsRefs = ref();

const checkConfirm = () => {
    setConditionsRefs.value.confirm()
};

const conditionConfirm = (v) => {
    emit("confirm", v);
	dialogIsShow.value = false;
}


// 关闭弹框
const close = () => {
	dialogIsShow.value = false;
};
</script>

<style></style>
